<template>
  <el-dialog title="搜索控制" :visible.sync="isShow" width="800px" @close="close">
    <el-form :inline="true" style="margin:10px 0">
      <el-button @click="createAction" type="primary" plain size="small">新增</el-button>
    </el-form>
    <el-table :data="itemList" size='medium' style="margin-top:20px" border>
      <el-table-column prop="id" label="id" width="100" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="字段名" prop="name" :show-overflow-tooltip="true"/>
      <el-table-column label="key" prop="key" :show-overflow-tooltip="true"/>
      <el-table-column label="是否显示" prop="path" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="0"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="switchChange(scope.row)"
            >
          </el-switch>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>


<script>
import { findFilterList, updateFilter, createFilter } from "@/api/interface/filter.js";
export default {
  components: {},
  data() {
    return {
        isShow: false,
        itemList: [],
    }
  },
  created(){
  },
  methods:{
    show(val){
      console.log(123)
      this.isShow = true
      this.form = val
      this.findFilterList()
    },
    close(){
        this.isShow = false
    },
    findFilterList(){
      findFilterList({
        router: this.form.id
      }).then(res=>{
        if(res.data.code==10000){
          this.itemList = res.data.data.list
        }
      })
    },
    // 状态发生改变
    switchChange(e) {
      updateFilter({
        filterId: e.id,
        status: e.status,
      }).then((response) => {
        if (response.code == 10000) {
          this.findFilterList();
          this.$message({
            message: "修改成功",
            type: "success",
          });
        }
      })
    },
    createAction(){
      var options = [{'value': 1, 'label': '忙碌'}, 
      {'value': 2, 'label': '闲置'}, 
      {'value': 3, 'label': '损坏'}, 
      {'value': 4, 'label': '已共享'}]
      createFilter({
        "router": 206,
        "filterTypeName": "下拉选项",
        "filterTypeKey": "input",
        "name": "技能",
        "key": "skill",
        "options": '',
        "status": 1
      })
    },
  },
}
</script>

<style lang="scss" scoped>

</style>>
